
import React, { Component } from 'react';
import {Row,Col,Input,Select} from "antd"
import * as echarts from 'echarts';
import { ajax } from '../../api';
import "./index.scss"
import { tupei } from '../../utils';

const {Search} = Input
const { Option } = Select;

class KucunTu extends Component {

    componentDidMount(){
        ajax.KucunList().then(res=>{
            if(res.code==200){
                this.chartInit(res.list,res.a)
            }
        })

        ajax.bintu({
            keyword:"发动机配件"
        }).then(res=>{
            if(res.code==200){
                this.chartInit1(res.list)
            }
        })
    }


        chartInit=(list,a)=>{
        var chartDom = document.getElementById('mainchart');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: list,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '库存数量',
                    type: 'bar',
                    barWidth: '60%',
                    data: a
                }
            ]
        };

        option && myChart.setOption(option);

            }

        chartInit1=(a)=>{
            var chartDom = document.getElementById('mainchart1');
            var myChart = echarts.init(chartDom);
            var option;
    
            option = {
                title: {
                    text: '配件类型',
                    subtext: '库存比例',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                series: [
                    {
                        name: '库存数量',
                        type: 'pie',
                        radius: '50%',
                        data:a,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
    
            option && myChart.setOption(option);
            }

        onSearch=()=>{
            var keyword=this.SearchInp.state.value
            ajax.KucunList({
                keyword
            }).then(res=>{
                if(res.code==200){
                    this.chartInit(res.list,res.a)
                }
            })
        }

        handleChange=(value)=>{
            ajax.bintu({
                keyword:value
            }).then(res=>{
                if(res.code==200){
                    this.chartInit1(res.list)
                }
            })
        }

    render() {
        return (
            <div style={{marginTop:50}}>
                <Row>
                    <Col span={11} offset={1}>
                        <div style={{border:"1px solid #000"}}>
                            <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"0 10px 0 20px",backgroundColor:"#ccc",height:50}}>
                                <h2 style={{fontSize:"20px",fontWeight:"500",letterSpacing:"2px",marginBottom:0}}>库存图</h2>
                                <Search placeholder="搜索入库配件" enterButton="搜索" style={{width:350}} ref={el=>this.SearchInp=el}   onSearch={this.onSearch}/>
                            </div>
                            <div id="mainchart" className="mychart"></div>
                        </div>
                    </Col>
                    <Col span={11} offset={1}>
                        <div style={{border:"1px solid #000",padding:"18px 0 0"}}>
                            <div style={{padding:"0 0 0 18px"}}>
                                <Select defaultValue="发动机配件" style={{ width: 120 }} onChange={this.handleChange}>
                                    {
                                        tupei.map((item,i)=>{
                                            return (<Option value={item.value} key={i}>{item.value}</Option>)
                                        })
                                    }
                                </Select>
                            </div>
                            <div id="mainchart1"  className="mychart1"></div>
                        </div>
                    </Col>
                </Row>
            </div>
        );
    }
}

export default KucunTu;